﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>购物车总价</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>购物车总价</h1><br/>

<div id="app">
    <table class="table table-bordered">
        <caption>我的购物车</caption>
        <thead>
            <tr>
                <!--click点击时checkbox的状态还没有改变，所以拿到的总是相反的
                change是当值变化后再触发函数
                -->
                <th>全选<input type="checkbox" v-model="checkAll" @change="change"/></th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(v,i) in products">
                <td><input type="checkbox" @change="checkOne" v-model="v.isSelected"/></td>
                <td><img width="40" height="40" :src="v.productCover" :title="v.productName"/>{{v.productName}}</td>
                <td>{{v.productPrice}}</td>

                <!--加上    .number   修饰符可以使值为字符串变成数字
                            .lazy当输入框推动焦点时更新可以直接在  .number  后写
                -->
                <td><input type="number" v-model.number="v.productCount"/></td>
                <!--<td>{{(v.productPrice*v.productCount).toFixed(2)}}</td>  保留两位-->

                <!--过滤器  原数据不变的情况，只是改变显示的效果 管道符-->
                <td>{{v.productPrice*v.productCount | myFixed(2)}}</td>
                <td><button class="btn btn-danger" @click="remove(v)">删除</button></td>
            </tr>
        </tbody>
    </table>

    <!--数据一变化就会重新调用，不会缓存上次结果，这里可以使用computed解决-->
    <p>总价格:{{sum() | myFixed(2)}}</p>
</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        filters:{//可以有好多自定义的过滤器
            myFixed(result,param){//这里的this指向的是window
                return '￥'+result.toFixed(param);//result代表的是管道符前面的内容，param代表的是参数
            }
        },
        created() {
            //在回调函数中this指向的是axios了，所以要使用箭头函数
            axios.get('./carts.json').then(resp => {
                console.log(resp);
                this.products = resp.data;
                this.checkOne();//如果数据一开始全都选中了，那全选不会选中这是一个bug，所以在数据获取到以后初始化一下
            }).catch(error => {
                console.log(error);
            })

            //以下这种this指向的是window对象
            /*axios.get('./carts.json').then(function(resp){
                console.log(this);
            })*/
        },
        methods: {
            sum(){//求和
                //pre上一次的对象，next下一次的对象
                return this.products.reduce((pre,next)=>{
                    if(!next.isSelected) return pre;//如果当前没被选中，就不加当前这一项
                    return pre+next.productPrice*next.productCount;
                },0)//从0开始累加
            },
            checkOne(){//根据下面点击的结果控制上面全选的结果
                //every返回的是boolean类型
                this.checkAll = this.products.every(item=>item.isSelected);
            },
            change(){
                //根据当前自己的状态设置其他的状态，实现全选反选
                this.products.forEach(item=>item.isSelected=this.checkAll);
            },
            remove(p){
                /*记住要删除则是过滤不相等的数据*/
                this.products = this.products.filter(item=>item!==p);
            }
        },
        data: {
            products: [],
            checkAll:false//是否全选
        },
        mounted() {

        }
    });
</script>

</body>
</html>